<template>
  <div class="room-introduction">
    <div class="image">
      <!-- <img src="../../assets/img/reservation/banner.png" alt=""> -->
      <div class="title">
        <h2>rosewood introdution</h2>
      </div>
    </div>
    <LayoutContain>
      <div class="introduction-navigation">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/reservation' }">紫檀预定</el-breadcrumb-item>
          <el-breadcrumb-item>客房介绍</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="introduction-message" v-if='Object.keys(this.data).length !== 0'>
        <div class="message-title" >
          <h2>{{data.roomName}}</h2>
          <div class="message-content">
            <p>
              十九座山峰自北而南绵延不绝，构成巍峨雄壮的苍山。白云浮动，演绎出千变万化的姿态。经夏不消的苍山雪，是素负盛名的大理”风花雪月”四景之一，堪称苍山一绝。房间大量运用白色，象征苍山终年不化的积雪，银装素裹。别具一格地运用大量原生态石头打造不规则的门洞以及粗糙的墙面肌理，尽显原生态自然本色，让人在亲近自然的过程中寻觅到弥足珍贵的朴拙之美。不妨说，苍山，正是大理开始的地方。
            </p>
          </div>
          <div class="messsge-list">
            <ul>
              <li>价格：¥{{data.roomType.price}}</li>
              <li>紫檀家人专享：¥{{data.discount}}</li>
              <li>房型：{{data.roomType.typeName}}</li>
              <li>床型：一张{{data.roomType.bedNum}}米特大床</li>
              <li>面积：{{data.roomType.roomArea}}m2</li>
            </ul>
          </div>
          <div class="message-image">
            <div class="message-image-contain">
            <div class="big-img">
              <img :src="imgUrl" alt="" ref="bigImg">
            </div>
            <div class="small-img">
              <ul>
                <li
                v-for="item in img"
                :key="item.id"
                >
                <img :src="api+item.image" alt="" @click="changeImg" ref="smallImg"></li>
              </ul>
            </div>
            </div>
          </div>
          <div class="message-describe">
            <ul>
              <li>
                <span>您的专属主卧：</span>
                <p>
                   慕斯高端订制床垫，富安娜埃及棉床品，MPE纯天然乳胶枕，专属全新竹纤维浴巾，专属使用亚麻拖鞋，原装资生堂洗浴 品，免费全国直播电话，民族特色健康早餐
                </p>
               </li>
              <li>
                <span>紫檀家人专享：</span>
                <p>
                  延时退房，免费接机接站服务
                </p>
                </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="introduction-form">
        <div class="form-title">
          <h2>预订信息</h2>
        </div>
        <div class="form-body">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="form-choose">
              <el-form-item label="入住时间" required>
              <el-col :span="20">
                <el-form-item prop="checkTime">
                  <el-date-picker v-if="isReloadData" type="date" placeholder="ruleForm.checkTime" v-model="ruleForm.checkTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="离店时间" required>
              <el-col :span="20">
                <el-form-item prop="leaveTime">
                  <el-date-picker v-if="isReloadData" type="date" placeholder="ruleForm.leaveTime" v-model="ruleForm.leaveTime" style="width: 100%;" @blur="upMoney(ruleForm)"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="人数" prop="people">
              <el-select v-model="ruleForm.people" placeholder="两人">
                <el-option label="一人" value="1"></el-option>
                <el-option label="两人" value="2"></el-option>
                <el-option label="三人" value="3"></el-option>
                <el-option label="四人" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="儿童" prop="child">
              <el-select v-model="ruleForm.child" placeholder="一位">
                <el-option label="一位" value="1"></el-option>
                <el-option label="两位" value="2"></el-option>
                <el-option label="三位" value="3"></el-option>
                <el-option label="四位" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="备注信息" prop="remark">
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>
          <div class="form-submit">
            <div class="order-total">
              <p>订单总价</p>
              <span>￥{{ruleForm.money}}</span>
            </div>
            <div class="order-button">
              <el-form-item>
                <!-- <el-button type="primary" @click="submitForm(ruleForm)">加入订房单</el-button> -->
                <el-button type="primary" @click="ydsubmitForm(ruleForm)">立即预订</el-button>
              </el-form-item>
            </div>
          </div>
        </el-form>
        </div>
      </div>
    </LayoutContain>
  </div>
</template>

<script>
// import { order } from '../../api/order'
import { getData } from '../../api/introduction'
import { getImage } from '../../api/getImage'
const LayoutContain = () => import('../../components/layout-contain')
export default {
  name: 'RoomIntroduction',
  components: {
    LayoutContain
  },
  data () {
    return {
      ruleForm: {
        name: '',
        people: '2',
        child: '1',
        checkTime: '',
        leaveTime: '',
        delivery: false,
        type: [],
        resource: '',
        remark: '',
        subDate: 1,
        money: '',
        roomId: ''
      },
      imgUrl: '',
      data: {},
      img: {},
      api: 'http://47.96.89.247:8080/qf_hotel',
      isReloadData: true,
      checkDay: '',
      leaveDay: '',
      price: ''
    }
  },
  created () {
    this.ruleForm.roomId = this.$route.query.id
    getData(this.$route.query.id).then(res => {
      this.data = res.data
      this.imgUrl = this.api + this.data.image
      // 判断价格
      if (sessionStorage.getItem('userName')) {
        this.price = this.data.discount
      } else {
        this.price = this.data.roomType.price
      }
      this.ruleForm.money = this.price * 2
    }).catch(err => console.log(err))
    // 获取图片
    getImage(this.$route.query.id).then(res => {
      this.img = res.data
    }).catch(err => console.log(err))

    // 根据系统时间自动添加预定时间
    const aDate = new Date()
    const seperator1 = '-'
    const month = aDate.getMonth() + 1
    this.leaveDay = aDate.getDate() + 2
    this.checkDay = aDate.getFullYear() + seperator1 + month + seperator1 + aDate.getDate()
    this.ruleForm.checkTime = this.checkDay
    this.ruleForm.leaveTime = aDate.getFullYear() + seperator1 + month + seperator1 + this.leaveDay
  },
  methods: {
    ydsubmitForm (cont) {
      if (sessionStorage.getItem('userName') && sessionStorage.getItem('userPassword')) {
        this.$router.push({
          path: '/book',
          query: {
            fxdata: JSON.stringify(cont)
          }
        })
      } else {
        this.$confirm('请登录之后再预定', '您还未登录', {
          confirmButtonText: '去登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/loginregister')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    },
    changeImg () {
      // console.log(event.target.src)
      this.imgUrl = event.target.src
    },
    upMoney (res) {
      const time = {}
      time.checkTime = new Date(res.checkTime).getTime()
      time.leaveTime = new Date(res.leaveTime).getTime()
      time.cha = time.leaveTime - time.checkTime
      time.z = Math.ceil(time.cha / 1000 / 3600 / 24)
      this.ruleForm.money = time.z * this.price

      const leavedate = new Date(time.leaveTime)
      const leaveY = leavedate.getFullYear() + '-'
      const leaveM = (leavedate.getMonth() + 1 < 10 ? '0' + (leavedate.getMonth() + 1) : leavedate.getMonth() + 1) + '-'
      const leaveD = leavedate.getDate() < 10 ? '0' + leavedate.getDate() : leavedate.getDate()
      this.ruleForm.leaveTime = leaveY + leaveM + leaveD

      const checkdate = new Date(time.checkTime)
      const checkY = checkdate.getFullYear() + '-'
      const checkM = (checkdate.getMonth() + 1 < 10 ? '0' + (checkdate.getMonth() + 1) : checkdate.getMonth() + 1) + '-'
      const checkD = checkdate.getDate() < 10 ? '0' + checkdate.getDate() : checkdate.getDate()
      this.ruleForm.checkTime = checkY + checkM + checkD

      this.reload()
    },
    reload () {
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.image{
    position: relative;
    height: 884px;
    background: url(../../assets/img/reservation/banner.png) no-repeat;
    background-size: cover;
    z-index: -1;
    .title{
      text-align: center;
      h2{
        width: 100%;
        height: 112px;
        font-size: 80px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 36px;
        color: #FFFFFF;
        opacity: 1;
        text-align: center;
        position: absolute;
        top: 40%;
      }
    }
  }
.introduction-navigation{
  .el-breadcrumb{
    font-size: 18px;
  }
  width: 264px;
  height: 25px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 48px;
  color: #333333;
  opacity: 1;
  margin-left: 29px;
  margin-top: 12px;
  padding-top: 20px;
  a{
    text-decoration: none;
    color: #333333;
    span{
      margin: 0 2px;
    }
  }
}
.introduction-message{
  width: 100%;
  margin-top: 39px;
  .message-title{
    h2{
      width: 100%;
      height: 50px;
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 72px;
      color: #333333;
      opacity: 1;
      text-align: center;
    }
  }
  .message-content{
    margin: 55px 48px 40px;
    width: 1104px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 36px;
    color: #333333;
    opacity: 1;
    p{
      text-indent: 40px;
    }
  }
  .messsge-list{
    margin-left: 48px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 36px;
    color: #333333;
    opacity: 1;
    margin-bottom: 55px;
  }
  .message-image{
    width: 840px;
    min-height: 729px;
    margin-bottom: 64px;
    &-contain{
      width: 100%;
      position: absolute;
      left: 50%;
      margin-left: -420px;
      .big-img{
        img{
          width: 840px;
          height: 533px;
        }
      }
      .small-img{
        width: 840px;
        margin-top: 30px;
        ul{
          display: flex;
          justify-content: space-between;
          li{
            img{
              height: 145px;
              width: 145px;
            }
          }
        }
    }
    }
  }
  .message-describe{
    margin: 55px 70px 40px;
    width: 1085px;
    height: 103px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 36px;
    color: #333333;
    opacity: 1;
    ul{
      li{
        min-height: 71px;
        list-style: disc;
        span{
          float: left;
        }
        p{
          width: 959px;
          float: right;
        }
      }
    }
  }
}
.introduction-form{
  width: 98%;
  min-height: 500px;
  margin-top: 60px;
  padding: 0 10px;
  .form-title{
    width: 100%;
    height: 50px;
    font-size: 36px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 36px;
    color: #333333;
    opacity: 1;
    text-align: center;
    margin-bottom: 55px;
  }
  .el-form{
    .form-choose{
    display: flex;
    margin-bottom: 20px;
    .el-form-item {
     /deep/ .el-form-item__label{
        width: 50px;
        font-size: 18px;
      }
    }
    }
    .el-form-item{
      /deep/ .el-textarea__inner{
              height: 100px;
              font-size: 20px;
      }
      /deep/ .el-form-item__label{
        font-size: 18px;
      }
      /deep/ .el-form-item__label::before{
        content: "";
      }
    }
    .form-submit{
      margin-top: 61px;
      .order-total{
        float: left;
        height: 50px;
        padding-left:15px ;
        p{
          height: 42px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 36px;
          color: #333333;
          opacity: 1;
          float: left;
        }
        span{
          float: left;
          width: 170px;
          height: 50px;
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 36px;
          color: #798C9D;
          opacity: 1;
          padding-left: 10px;
        }
      }
      .order-button{
        float: right;
        /deep/ .el-button{
          width: 174px;
          height: 50px;
          font-size: 18px;
          background: #798C9D;
          opacity: 1;
          border: none;
        }
      }
    }
  }
}
</style>
